import React from 'react';
// 导入 ReactDOM
import ReactDOM from 'react-dom/client';

// 创建渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 函数组件的事件绑定
function App1() {
  return (
    <div>
      {/* 1、匿名箭头函数 */}
      <button onClick={() => console.log('按钮被点击了')}>按钮1</button>
    </div>
  );
}

// 函数定义的事件绑定
function App2() {
  function clickHandler(e) {
    console.log('按钮被点击了222');
    console.log(e);
  }
  return (
    <div>
      {/* 1、匿名箭头函数 */}
      <button onClick={clickHandler}>按钮2</button>
    </div>
  );
}

function App3() {
  const clickHandler = () => {
    console.log('按钮被点击了333');
  };
  return (
    <div>
      {/* 1、匿名箭头函数 */}
      <button onClick={clickHandler}>按钮3</button>
    </div>
  );
}

// 类组件事件绑定
class App4 extends React.Component {
  render() {
    return (
      <div>
        {/* 匿名箭头函数 */}
        <button onClick={() => console.log('类组件按钮被点击了')}>按钮4</button>
      </div>
    );
  }
}

class App5 extends React.Component {
  clickHandler(e) {
    console.log('类组件按钮被点击了5555');
    console.log(e);
    console.log('target', e.target);
    console.log('currentTarget', e.currentTarget);
  }

  render() {
    return (
      <div>
        {/* 匿名箭头函数 */}
        <button onClick={this.clickHandler}>按钮5</button>
      </div>
    );
  }
}

// React 中事件对象的应用
function App6() {
  function handleClick(e) {
    // 阻止了标签的默认行为（默认事件处理函数）
    e.preventDefault();
    console.log('链接被点击了');
    console.log(e);
  }
  return (
    <div>
      <a onClick={handleClick} href="http://www.baidu.com">
        点我
      </a>
    </div>
  );
}

// 渲染这个标签（React 元素）
root.render(
  <div>
    <App1 />
    <App2 />
    <App3 />
    <App4 />
    <App5 />
    <App5 />
    <App5 />
    <App6 />
  </div>
);
